import TableCom from '@/components/table'
import React, { Fragment, useEffect, useState } from 'react'
import { Button, Image, message, Form } from 'antd'
import * as api from '@/api/table'
import * as api2 from '@/api/dailog'
import Dialog from '@/components/dialog'
import '@/pattern/home/table.css'
import Dialog2 from '@/components/dialog2'
import store from '@/store'
const ShopClass = () => {
    let [tableData, settableData] = useState<any>([])
    let [setIsModalOpens, setSetIsModalOpen] = useState<boolean>(false)
    let [isShow, setIsShow] = useState<boolean>(false)
    let [keys, setKeys] = useState<any>()
    let [titless, setTitles] = useState<string>()
    let [name, setName] = useState<string>('')
    const [ModifyNameForm] = Form.useForm()
    useEffect(() => {
        uploadGetApi()
    }, [])

    let uploadGetApi = () => {
        api.getTableData()
            .then(res => {
                res.data.data.forEach((item: any) => {
                    item.key = Math.random()
                });
                settableData(res.data.data.reverse())
            })
    }


    let [columns, setcolumns] = useState<Array<Object>>([
        {
            title: '货品图片',
            dataIndex: 'categoryImgurl',
            key: 'categoryImgurl',
            render: (text: any) => <Image src={text} width={40} />
        },
        {
            title: '商品名称',
            dataIndex: 'categoryName',
            key: 'categoryName',
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '名字',
            dataIndex: 'creator',
            key: 'creator',

        },
        {
            title: '购买账号',
            dataIndex: 'updator',
            key: 'updator',
        },
        {
            title: '操作',
            render: (text: any) => (
                <div>
                    <Button onClick={() => handleDelClick(text)}>删除</Button>
                    <Button onClick={() => hendleAmend(text)}>修改</Button>
                    <Button>查看</Button>
                </div>
            )
        }
    ])

    let dialogData = [
        {
            title: '商品名称',
            name: '商品名称',
        }

    ]

    let pushMsg = async (a: string, b: any) => {
        let res = await api2.pushMsgApi(a, b)
    }
    const handleOk = (a?: any, b?: any) => {
        if (titless === '增加类目') {
            let msg = a.current.getFieldValue()
            console.log(msg);
            try {
                pushMsg(msg.name, b)
                a.current.submit()
                //清空输入框
                a.current.resetFields()
                setSetIsModalOpen(false);
            } catch (e) {

            }
            uploadGetApi()

        } else if (titless === '修改类目') {
            try {
                api.updataApi(a.current.getFieldValue().name, keys.category_id)
                    .then(res => {
                    })
                setSetIsModalOpen(false);
            } catch (e) {
            }
        }
        uploadGetApi()
    };
    const handleCancel = () => {
        setSetIsModalOpen(false)
    };
    const handleShow = () => {
        store.dispatch({type:'SHOW',payload:''})
        setTitles('增加类目')
        setSetIsModalOpen(true)
    }

    let handleDelClick = (key: any) => {
        setKeys(key)
        setIsShow(true)
    }
    let handleOk2 = async () => {
        try {
            let res = await api.delTableData(keys.category_id)
            message.success('删除成功')
        } catch (err) {
            message.error('删除失败')
        }
        setIsShow(false)
        uploadGetApi()
    }
    let handleCancel2 = () => {
        message.info('已取消')
        setIsShow(false)
    }
    let hendleAmend = (text: any) => {
        console.log(text);
        console.log(ModifyNameForm);
        ModifyNameForm.setFieldsValue({
            商品名称: text.categoryName
        })
        store.dispatch({type:'AMEND',payload:text.categoryImgurl})
        setKeys(text)
        setTitles('修改类目')
        setSetIsModalOpen(true)
    }



    let ruleArr = [
        [
            {
                required:true,
                validator:()=>{

                }
            }
        ]
    ]


    



    return (
        <Fragment>
            <Button onClick={handleShow}>添加商品</Button>
                <Dialog dialogData={dialogData} pushMsg={pushMsg} handleOk={handleOk} handleCancel={handleCancel} setIsModalOpens={setIsModalOpens} titless={titless} ModifyNameForm={ModifyNameForm}>

                </Dialog>
            <TableCom tableData={tableData} columns={columns} ></TableCom>
            <Dialog2 isShow={isShow} handleOk2={handleOk2} handleCancel2={handleCancel2}></Dialog2>
        </Fragment>
    )
}

export default ShopClass